/** 计数器组件 */
import React, { Component } from 'react'

import store from '../store'
// 如果actions函数数量较多，导入方式变得非常麻烦
// import {
//   addCounterAction,
//   subCounterAction
// } from '../store/counter/counterCreator'
// redux解耦合导入
import * as actions from '../store/counter/counterCreator'
import { bindActionCreators } from "redux"

// 引入react-redux中的数据链接模块
import { connect } from "react-redux"

class Counter extends Component {

  add() {
    // 耦合发送一个增加数据请求
    // store.dispatch(addCounterAction(1))
    // 基本解耦合方式
    // this.props.addCounter(1)
    // 高级解耦合方式
    this.props.addCounterAction(1)
  }

  sub() {
    // 耦合发送一个减少数据请求
    // store.dispatch(subCounterAction(1)) // 耦合减少数据1
    // 基本解耦合方式
    // this.props.subCounter(1)              // 解耦合减少数据1
    // 高级解耦合方式
    this.props.subCounterAction(1)
  }

  componentDidMount() {
    store.subscribe(() => { // redux订阅函数
      // 一旦redux修改数据，刷新页面
      this.setState({})
    })
  }

  render() {
    return (
      <div>
        <h2>计数器组件</h2>
        <p>计数器(耦合)：{store.getState().counter}</p>
        <p>计数器(解耦合): {this.props.counter}</p>
        <div>
          <button onClick={this.add.bind(this)}>增加</button>
          <button onClick={this.sub.bind(this)}>减少</button>
        </div>
      </div>
    )
  }
}

// 解耦合state数据，解耦合到当前组件属性
// 解耦合前：store.getState().counter访问数据
// 解耦合后：this.props.counter 访问数据
// const mapStateToProps = state => {
const mapState = state => {
  return {
    counter: state.counter
  }
}

// 解耦合actions操作，解耦合到当前组件属性
// const mapDispatchToProps = dispatch => {
// const mapActionToProps = dispatch => {
// const mapAction = dispatch => {
//   return {
//     addCounter: data => dispatch(addCounterAction(data)),
//     subCounter: data => dispatch(subCounterAction(data))
//   }
// }
// redux结合react-redux解耦合actions函数的方式
const mapAction = dispatch => bindActionCreators(actions, dispatch)

// 修改导出方式
export default connect(
  mapState,
  mapAction
)(Counter)
